<template>
  <div>
    <div class="container">
      <el-form
        class="c_form"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        label-position="top"
      >
        <el-form-item
          :label="$t('故障信息')"
          prop="error_msg"
          class="c_form_item"
        >
          <el-input
            type="textarea"
            :rows="3"
            maxlength="100"
            show-word-limit
            v-model="ruleForm.error_msg"
            :placeholder="$t('请输入故障描述')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('故障图片')"
          prop="error_image"
          class="c_form_item"
        >
          <el-upload
            class="avatar-uploader"
            :limit="3"
            action="https://admin.eprosmartlife.com/api/index/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="handlePictureSuccess"
            accept=".jpeg,.png,.jpg,.bmp,.gif"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
          <div class="c_tip">{{ $t("最多上传3张图片，每张不超过1m") }}</div>
        </el-form-item>
        <el-form-item
          :label="$t('故障视频')"
          prop="error_video"
          class="c_form_item"
        >
          <el-upload
            class="avatar-uploader"
            :limit="3"
            action="https://admin.eprosmartlife.com/api/index/upload"
            list-type="picture-card"
            :on-preview="handleVideoCardPreview"
            :on-success="handleVideoSuccess"
            accept=".avi,.wmv,.mpg,.mpeg,.mov,.flv,.swf,.mp4"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="file" slot-scope="{ file }">
              <video
                class="el-upload-list__item-thumbnail"
                width="100%"
                :src="file.url"
              ></video>
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handleVideoCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisibleVideo">
            <video
              v-if="dialogVisibleVideo"
              width="100%"
              :src="dialogVideoUrl"
              :controls="true"
              autoplay
            ></video>
          </el-dialog>
          <div class="c_tip">
            {{ $t("最多上传3个视频,单个视频不超过30M,MP4格式") }}
          </div>
        </el-form-item>
        <div class="c_info">
          <span class="c_info_x">*</span>
          <span>
            {{
              $t(
                "寄修地址:深圳市龙岗区坂田街道岗头社区宝能科技园（南区》一期B区10栋12楼"
              )
            }}</span
          >
        </div>
        <div class="c_info">
          <span class="c_info_x">*</span>
          <span> {{ $t("收货电话:0755-28348580/28348958 Ext.:835") }}</span>
        </div>
      </el-form>
      <div class="c_button_view">
        <el-button class="c_button" @click="submitForm">{{
          $t("下一步")
        }}</el-button>
      </div>
    </div>
    <div class="container_mobile">
      <el-form
        class="c_form"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        label-position="top"
      >
        <el-form-item
          :label="$t('故障信息')"
          prop="error_msg"
          class="c_form_item"
        >
          <el-input
            type="textarea"
            :rows="3"
            maxlength="100"
            show-word-limit
            v-model="ruleForm.error_msg"
            :placeholder="$t('请输入故障描述')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('故障图片')"
          prop="error_image"
          class="c_form_item"
        >
          <el-upload
            class="avatar-uploader"
            :limit="3"
            action="https://admin.eprosmartlife.com/api/index/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="handlePictureSuccess"
            accept=".jpeg,.png,.jpg,.bmp,.gif"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
          <div class="c_tip">{{ $t("最多上传3张图片，每张不超过1m") }}</div>
        </el-form-item>
        <el-form-item
          :label="$t('故障视频')"
          prop="error_video"
          class="c_form_item"
        >
          <el-upload
            class="avatar-uploader"
            :limit="3"
            action="https://admin.eprosmartlife.com/api/index/upload"
            list-type="picture-card"
            :on-preview="handleVideoCardPreview"
            :on-success="handleVideoSuccess"
            accept=".avi,.wmv,.mpg,.mpeg,.mov,.flv,.swf,.mp4"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisibleVideo">
            <video width="100%" :src="dialogVideoUrl" autoplay></video>
          </el-dialog>
          <div class="c_tip">
            {{ $t("最多上传3个视频,单个视频不超过30M,MP4格式") }}
          </div>
        </el-form-item>
        <div class="c_info">
          <span class="c_info_x">*</span>
          <span>{{
            $t(
              "寄修地址:深圳市龙岗区坂田街道岗头社区宝能科技园（南区》一期B区10栋12楼"
            )
          }}</span>
        </div>
        <div class="c_info">
          <span class="c_info_x">*</span>
          <span>{{ $t("收货电话:0755-28348580/28348958 Ext.:835") }}</span>
        </div>
      </el-form>
      <div class="c_button_view">
        <el-button class="c_button" @click="submitForm">{{
          $t("下一步")
        }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVideoUrl: "",
      dialogVisible: false,
      dialogVisibleVideo: false,
      ruleForm: {
        error_msg: "",
        error_image: "",
        error_video: "",
      },
      rules: {
        error_msg: [
          {
            required: true,
            message: this.$t("请输入故障描述"),
            trigger: "blur",
          },
        ],
        error_image: [
          {
            required: true,
            message: this.$t("请上传故障图片"),
            trigger: "blur",
          },
        ],
        error_video: [
          {
            required: true,
            message: this.$t("请上传故障视频"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm() {
          console.log(this.ruleForm,'this.ruleForm')
return
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit("next", this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handlePictureSuccess(response, file, fileList) {
      //   console.log(response, file, fileList);
      let filePath = [];
      fileList.forEach((element) => {
        filePath.push(element.response.data);
      });
      this.ruleForm.error_image = filePath.join(",");
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file) {
      console.log(file);
    },
    handleVideoSuccess(response, file, fileList) {
        console.log(response, file, fileList);
      let filePath = [];
      fileList.forEach((element) => {
        filePath.push(element.response.data);
      });
      this.ruleForm.error_video = filePath.join(",");
    },
    handleVideoCardPreview(file) {
      this.dialogVideoUrl = file.url;
      this.dialogVisibleVideo = true;
    },
  },
};
</script>

<style lang="less" scoped>
@media (min-width: 900px) {
  .container {
    display: block;
  }

  .container_mobile {
    display: none;
  }

  .c_form {
    padding: 0 240rem;

    .c_form_item {
      margin-top: 86rem;
    }

    .c_tip {
      font-size: 20rem;
      font-family: Source Han Sans CN;
      font-weight: 300;
      color: #999999;
    }

    .c_info {
      margin-top: 28rem;
      font-size: 22rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;

      .c_info_x {
        color: #f56c6c;
      }
    }
  }

  .c_button_view {
    display: flex;
    justify-content: center;
    margin: 200rem 0;

    .c_button {
      width: 600rem;
      height: 100rem;
      background: #333333;
      border-radius: 20rem;
      font-size: 30rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }
  }

  :deep(.el-dialog__wrapper) {
    z-index: 2060 !important;
  }
}

@media (max-width: 900px) {
  .container {
    display: none;
  }

  .container_mobile {
    display: block;
  }

  .c_form {
    padding: 0 10px;

    .c_form_item {
      margin-top: 30px;
    }

    .c_tip {
      font-size: 10px;
      font-family: Source Han Sans CN;
      font-weight: 300;
      color: #999999;
    }

    .c_info {
      margin-top: 16px;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;

      .c_info_x {
        color: #f56c6c;
      }
    }
  }

  .c_button_view {
    display: flex;
    justify-content: center;
    margin: 20px 0;

    .c_button {
      width: 300px;
      height: 44px;
      background: #333333;
      border-radius: 7px;
      font-size: 15px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #fefefe;
    }
  }

  :deep(.el-form-item__label) {
    text-align: right;
    vertical-align: middle;
    font-size: 13px;
    color: #333333;
    line-height: 30px;
    box-sizing: border-box;
  }
  :deep(.avatar-uploader .el-upload) {
    border: 1px dashed #d9d9d9;
    border-radius: 7px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  :deep(.avatar-uploader .el-upload:hover) {
    border-color: #409eff;
  }
  :deep(.el-upload--picture-card) {
    width: 133px;
    height: 133px;
    background-color: #fff;
  }
  :deep(.el-upload-list--picture-card .el-upload-list__item) {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 7px;
    box-sizing: border-box;
    width: 133px;
    height: 133px;
    margin: 0 10px 10px 0;
    display: inline-block;
  }
  :deep(.avatar-uploader-icon) {
    font-size: 28px;
    color: #8c939d;
    width: 133px;
    height: 133px;
    line-height: 133px;
    text-align: center;
  }
  :deep(.avatar) {
    width: 133px;
    height: 133px;
    display: block;
  }
}
</style>
<style>
@media (min-width: 900px) {
  .el-input__inner {
    height: 80rem;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 20rem;
  }

  .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 30rem;
    color: #333333;
    line-height: 50rem;
    padding: 0 12rem 0 0;
    box-sizing: border-box;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .el-upload--picture-card {
    width: 400rem;
    height: 350rem;
    background-color: #fff;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6rem;
    box-sizing: border-box;
    width: 400rem;
    height: 350rem;
    margin: 0 8rem 8rem 0;
    display: inline-block;
  }

  .avatar-uploader-icon {
    font-size: 28rem;
    color: #8c939d;
    width: 400rem;
    height: 350rem;
    line-height: 350rem;
    text-align: center;
  }

  .avatar {
    width: 400rem;
    height: 350rem;
    display: block;
  }
}
</style>
